<template>
  <div>
    <div>
    {{checkboxGroup1}}
    <el-checkbox-group v-model="checkboxGroup1" @change="handleCheckAllChange">
      <el-checkbox-button v-for="city in cityOptions" :label="city" :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
  </div>
        <h1>gaid layout
        </h1>
        <div> {{layout}}</div>
        <grid-layout
            :layout.sync="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
    >

        <grid-item v-for="item in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i"
                   :key="item.i"
                   @resize="SizeAutoChange(item.i)"
                   class="gridItem">
            <component :is="item.bi" :ref="`LineChart${item.i}`"></component>
        </grid-item>
    </grid-layout>
  </div>
</template>
<script>
// 引用：
import { GridLayout, GridItem } from 'vue-grid-layout'

// 注册：
export default {
  // components: { Chart4: () => import('../components/gridlayoutComponent/chart1.vue') },
  components: {
    GridLayout,
    GridItem,
    Chart4: () => import('../components/gridlayoutComponent/chart1.vue')
  },

  data () {
    return {
      cityOptions: ['AAA', 'BBB', 'CCC', 'DDD'],
      checkboxGroup1: [],
      layout: [
        // { x: 0, y: 0, w: 2, h: 2, i: '01111111111111' },
        // { x: 2, y: 0, w: 2, h: 4, i: '1' },
        // { x: 4, y: 0, w: 2, h: 5, i: '2' },
        // { x: 6, y: 0, w: 2, h: 3, i: '3' },
        // { x: 8, y: 0, w: 2, h: 3, i: '4' },
        // { x: 10, y: 0, w: 2, h: 3, i: '5' },
        // { x: 0, y: 5, w: 2, h: 5, i: '6' },
        // { x: 2, y: 5, w: 2, h: 5, i: '7' },
        // { x: 4, y: 5, w: 2, h: 5, i: '8' },
        // { x: 6, y: 3, w: 2, h: 4, i: '9' },
        // { x: 8, y: 4, w: 2, h: 4, i: '10' },
        // { x: 10, y: 4, w: 2, h: 4, i: '11' },
        // { x: 0, y: 10, w: 2, h: 5, i: '12' },
        // { x: 2, y: 10, w: 2, h: 5, i: '13' },
        // { x: 4, y: 8, w: 2, h: 4, i: '14' },
        // { x: 6, y: 8, w: 2, h: 4, i: '15' },
        // { x: 8, y: 10, w: 2, h: 5, i: '16' },
        // { x: 10, y: 4, w: 2, h: 2, i: '17' },
        // { x: 0, y: 9, w: 2, h: 3, i: '18' },
        // { x: 2, y: 6, w: 2, h: 2, i: '19' }
      ]
    }
  },
  methods: {
    SizeAutoChange (ChartId) {
      console.log('1111111111111')
      var EchartId = `LineChart${ChartId}` // 拿到子组件实力对象
      eval(`this.$refs.${EchartId}[0].sizechange()`) // 执行子组件的函数
    },
    quchong (arr) {
      const map = new Map()
      const newArr = arr.filter(v => !map.has(v.id) && map.set(v.id, 1))
      return newArr
    },
    addItem () {
      console.log(this.checkboxGroup1)
      // this.layout.push({ x: 0, y: 0, w: this.layout.length + 2, h: this.layout.length + 2, i: this.layout.length + 1 })
    },
    handleCheckAllChange (val) {
      console.log(val)
      if (val.includes('AAA')) {
        const res = this.layout.some(item => item.id === '00')
        if (!res) this.selectBi({ id: '00', w: 10, h: 8, bi: 'Chart4' })
      }
      if (val.includes('BBB')) {
        const res = this.layout.some(item => item.id === '01')
        if (!res) this.selectBi({ id: '01', w: 4, h: 4 })
      }
      if (val.includes('CCC')) {
        const res = this.layout.some(item => item.id === '02')
        if (!res) this.selectBi({ id: '02', w: 6, h: 4 })
      }
      if (val.includes('DDD')) {
        const res = this.layout.some(item => item.id === '03')
        if (!res) this.selectBi({ id: '03', w: 8, h: 4 })
      }
      // this.layout = this.quchong(this.layout)
    },
    selectBi (data) {
      const lastItem = this.findLastLayoutItem()
      console.log('lastItem', lastItem)
      console.log('data', data)
      let x
      let y
      const w = data.w
      const h = data.h
      if (lastItem) {
        if (lastItem.x + lastItem.w + w > 12) {
          x = 0
          y = lastItem.y + 1
        } else {
          x = lastItem.x + lastItem.w
          y = lastItem.y
        }
      } else {
        x = 0
        y = 0
      }
      console.log(w, 'w')
      this.layout.push({
        bi: data.bi,
        id: data.id,
        i: this.layout.length + 1,
        x,
        y,
        w,
        h
      })
    },
    findLastLayoutItem () {
      let lastY = -1
      this.layout.forEach((item) => {
        if (item.y > lastY) {
          lastY = item.y
        }
      })
      if (lastY > -1) {
        let lastItem
        this.layout.filter((item) => item.y === lastY).forEach(item => {
          if (lastItem) {
            if (item.x > lastItem.x) {
              lastItem = item
            }
          } else {
            lastItem = item
          }
        })
        return lastItem
      }

      return undefined
    }
  }
}
</script>
<style scoped>
.gridItem {
    border: solid #F5F5FA 1px;
    padding: 20px;
    border-radius: 10px;
    background-color: #F5F5FA;
    /* box-sizing: border-box; */
}
.vue-resizable {
  box-sizing: border-box;
  touch-action: none;
}
.layout {
  min-height: calc(100vh - 84px);
  background: #f5f5fa;
  border-radius: 12px;
}

.bottom-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
</style>
